<template>
  <div class="form">
    <h2 style="text-align: center; margin-top: 30px; margin-bottom: 30px;">等级提升申请</h2>
    <el-form ref="level" :model="level" label-position="top" :rules="rules">
      <el-form-item prop="agentApplicationTitle" label="申请标题" :label-width="formLabelWidth">
        <el-input
          v-model="level.agentApplicationTitle"
          autocomplete="off"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>
      <el-form-item prop="agentApplicationLevel" label="申请级别" :label-width="formLabelWidth">
        <!-- <el-input v-model="level.agentApplicationLevel" autocomplete="off" /> -->
        <el-select v-model="level.agentApplicationLevel" placeholder="请选择">
          <el-option key="1" label="1星" value="1" />
          <el-option key="2" label="2星" value="2" />
          <el-option key="3" label="3星" value="3" />
          <el-option key="4" label="4星" value="4" />
          <el-option key="5" label="5星" value="5" />
          <el-option key="6" label="6星" value="6" />
          <el-option key="7" label="7星" value="7" />
          <el-option key="8" label="8星" value="8" />
        </el-select>
      </el-form-item>
      <el-form-item prop="agentApplicationReason" label="申请理由" :label-width="formLabelWidth">
        <!-- <el-input v-model="level.agentApplicationReason" autocomplete="off" readonly="true" /> -->
        <el-input v-model="level.agentApplicationReason" type="textarea" :autosize="{ minRows: 5, maxRows: 100}" maxlength="4000" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="agentApplicationFile" label="添加附件" :label-width="formLabelWidth">
        <el-upload
          class="upload-demo"
          name="files"
          :action="url"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="5"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :on-success="handleAvatarSuccess"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

    </el-form>
    <div class="buttons">
      <el-button type="primary" @click="handleAdd('level')">提 交</el-button>
    </div>

  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { addAgentApplication } from '@/api/agentApplication'
export default {
  name: '',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // var checkBankName = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入开户行'))
    //   } else if (!this.isChinese(value)) { // 引入methods中封装的检查手机格式的方法
    //     callback(new Error('请输入中文'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      level: {},
      url: process.env.VUE_APP_BASE_API + 'file/',
      formLabelWidth: '200px',
      fileUrl: '',
      fileList: [],
      rules: {
        agentApplicationTitle: [{ required: true, message: '请输入申请标题', trigger: 'blur' }],
        agentApplicationLevel: [{ required: true, message: '请选择申请级别', trigger: 'blur' }],
        agentApplicationReason: [{ required: true, message: '请输入申请理由', trigger: 'blur' }]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.fileUrl = ''
      for (var i = 0; i < fileList.length; i++) {
        this.fileUrl = this.fileUrl + fileList[i].response.obj
        console.log(1)
      }
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleAvatarSuccess(res, file) {
      this.fileUrl = this.fileUrl + res.obj
    },
    handleAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.level.agentApplicationFile = this.fileUrl
          addAgentApplication(this.level).then((resp) => {
            this.$notify({
              title: '添加成功',
              type: 'success'
            })
            this.level = {}
          })
          return true
        } else {
          this.$notify({
            title: '请正确填写',
            type: 'error'
          })
          return false
        }
      })
    },

    isChinese(val) {
      if (/[^\u4E00-\u9FA5]/.test(val)) {
        return false
      } else {
        return true
      }
    },
    // 特殊字符过滤
    checkSpecificKey(str) {
      var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'"
      for (var i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) !== -1) {
          return false
        }
      }
      return true
    },

    // 验证字符串
    validateFontSize(rule, value, callback) {
      if (value.length < 30) {
        callback()
      } else {
        callback(new Error('字符串长度在1-30之间'))
      }
    },

    // 验证字符串
    validateCharacter(rule, value, callback) {
      if (this.checkSpecificKey(value)) {
        callback()
      } else {
        callback(new Error('请不要输入特殊字符'))
      }
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .avatar {
    width: 300px;
    height: 200px;
    display: block;
  }
  .form{
    border: #E4E7ED 1px solid;
    border-radius: 30px;
    padding: 50px;
    margin: 30px auto;
    width: 900px;
  }
  .buttons{
    text-align: center;
  }

</style>
